{% extends "tracking/tracking_base.html" %}
{% block title %}投诉建议{% endblock %}
{% block page_content %}

<h1 class="page-header">处理</h1>
<div class="col-md-12">
	<div class="col-md-12" style="background-color:#F2F2F2;height:40px;line-height:40px;font-size:20px;">详细信息</div>
	<div class="col-md-8">
		<div style="margin-top:10px;">
	    		<div class="col-md-2" style="font-size:20px;"><center>ID</center></div>
	    		<div class="col-md-5" style="font-size:20px;">{{ data.number }}</div>
		</div>
	</div>
	<div class="col-md-8">
		<div style="margin-top:15px;">
	    		<div class="col-md-2" style="font-size:20px;"><center>类型</center></div>
	    		<div class="col-md-5" style="font-size:20px;">{{ "建议" if data.type else "投诉" }}</div>
		</div>
	</div>
	<div class="col-md-8">
		<div style="margin-top:15px;">
	    		<div class="col-md-2" style="font-size:20px;"><center>内容</center></div>
	    		<div class="col-md-5" style="font-size:20px;">{{ data.content }}</div>
		</div>
	</div>
	<div class="col-md-8">
		<div style="margin-top:15px;">
	    		<div class="col-md-2" style="font-size:20px;"><center>提交人</center></div>
	    		<div class="col-md-5" style="font-size:20px;">{{ data.name }}</div>
		</div>
	</div>
	<div class="col-md-8">
		<div style="margin-top:15px;">
	    		<div class="col-md-2" style="font-size:20px;"><center>提交时间</center></div>
	    		<div class="col-md-5" style="font-size:20px;">{{ data.submission_date.strftime("%Y-%m-%d %H:%M:%S") }}</div>
		</div>
	</div>
	<div class="col-md-8">
		<div style="margin-top:15px;">
	    		<div class="col-md-2" style="font-size:20px;"><center>联系电话</center></div>
	    		<div class="col-md-5" style="font-size:20px;">{{ data.phone }}</div>
		</div>
	</div>
	<div class="col-md-12" style="background-color:#F2F2F2;height:40px;line-height:40px;font-size:20px;margin-top:20px;">跟进记录
		{% if data.state in [1, 2] %}
		<button type="button" class="btn btn-success" style="float:right;margin-top:3px;" data-target="#AddModal" data-toggle="modal">添加记录</button>
		<button type="button" class="btn btn-info" style="float:right;margin-right:10px;margin-top:3px;" data-target="#HandleModal" data-toggle="modal">已处理</button>
		{% endif %}
	</div>
	<div class="col-md-12 panel-group" style="margin-top:15px">
		{% for item in records %}
		<div class="panel panel-default">
			<div class="panel-heading" data-toggle="collapse" data-parent="#accordion" href="#collapse{{ records.index(item)+1 }}">
				<h4 class="panel-title">
						跟进时间：{{ item.time.strftime("%Y-%m-%d %H:%M:%S") }}&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp跟进人：{{ item.tracker_name }}
				</h4>
			</div>
			<div id="collapse{{ records.index(item)+1 }}" class="panel-collapse collapse in">
				<div class="panel-body">
					{{ item.content }}
				</div>
			</div>
		</div>
		{% endfor %}
	</div>
	<div class="modal fade" id="HandleModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
					<h4 class="modal-title" id="myModalLabel">已处理</h4>
				</div>
				<div class="modal-body">
					<center>确定将该申请置为已处理状态吗？</center>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-danger" onclick="handle('{{ data.number }}')">确定</button>
					<button type="button" class="btn btn-success" data-dismiss="modal" aria-hidden="true">取消</button>
				</div> 
			</div>
		</div><!-- /.modal-dialog -->
	</div>
	<div class="modal fade" id="AddModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
					<h4 class="modal-title" id="myModalLabel">添加跟进记录</h4>
				</div>
				<div class="modal-body">
					<form role="form" id="AddForm">
						<label for="content">跟进内容</label>
						<textarea class="form-control" id="content" name="content" cols=20 rows=5 required></textarea>
						<input type='hidden' name='app_number' id='app_number' value='{{ data.number }}'>
						<button type="button" style="margin-top:8px;" class="btn btn-default" onclick="add_submit()" >保存</button>
					</form>
				</div>
			</div>
		</div><!-- /.modal-dialog -->
	</div>
</div>
{% endblock %}
{% block scripts  %}
{{ super() }}
<script>
var state = -1;

var handle = function(app_number){
        $.ajax({
            url: "/tracking/advice/handle/",
            type: "POST",
	    data: {'app_number': app_number},
            dataType:"text",
            success: function(data) {

                json = eval("("+data+")");
		state = json.state;
		$('#HandleModal').modal('hide');
        	if(json.state === 0){
		    $('#msg_icon').removeAttr('class');
		    $('#msg_icon').attr('class', 'glyphicon glyphicon-ok-sign');
		    $("#msg").html("操作成功！");
	         }
		else{
		    $('#msg_icon').removeAttr('class');
		    $('#msg_icon').attr('class', 'glyphicon glyphicon-remove-sign');
  		    $('#msg').html("操作失败，" + json.msg);
		}
            },
	    error: function(xhr, error){
		    state = -1;
		    $('#msg_icon').removeAttr('class');
		    $('#msg_icon').attr('class', 'glyphicon glyphicon-remove-sign');
		    $('#msg').html("操作失败，服务器发生错误");
	    }
        });
	$('#MsgModal').modal();
	return;
};


var add_submit = function(){
        $.ajax({
            url: "/tracking/advice/add_tracking/",
            type: "POST",
	    data: $("#AddForm").serialize(),
            dataType:"text",
            success: function(data) {

                json = eval("("+data+")");
		state = json.state;
        	if(json.state === 0){
		    $('#msg_icon').removeAttr('class');
		    $('#msg_icon').attr('class', 'glyphicon glyphicon-ok-sign');
		    $("#msg").html("添加成功！");
		    $('#AddModal').modal('hide');		    
	         }
		else{
		    $('#msg_icon').removeAttr('class');
		    $('#msg_icon').attr('class', 'glyphicon glyphicon-remove-sign');
  		    $('#msg').html("添加失败，" + json.msg);
		}
            },
	    error: function(xhr, error){
		    state = -1;
		    $('#msg_icon').removeAttr('class');
		    $('#msg_icon').attr('class', 'glyphicon glyphicon-remove-sign');
		    $('#msg').html("添加失败，服务器发生错误");
	    }
        });
	$('#MsgModal').modal();
	return;
};

$(document).ready(function(){
	$('#MsgModal').on('hidden.bs.modal', function () {
		if(state === 0){
			window.location.reload();
		}
	});
});

</script>
<script>
    nav = document.getElementById("nav_advice");
    nav.setAttribute("class", "active");
</script>
{% endblock %}
